<!--登录页-->
<template>
    <div style="height:100vh;background-image:linear-gradient(135deg,#f5ba3c,#f5ca3c);overflow:hidden;">
        <el-container style="padding:30px;">
            <el-header>
                <el-row :gutter="10">
                    <el-col :span="1">
                    </el-col>
                    <el-col :span="2">
                        <el-avatar src="/img/logo.jpeg"></el-avatar>
                    </el-col>
                    <el-col :span="19" style="text-align: left;">
                        <span style="color:#fff;font-size:30px;font-weight:bold;">周易测运管理系统</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main style="padding: 0;">
                <el-row :gutter="40">
                    <el-col :span="14" style="padding: 40px;">
                        <img src="/img/baguatu.webp" style="width:50%;margin-top:20px;margin-left: 140px;">
                    </el-col>
                    <el-col :span="8" style="padding: 0;">
                        <el-card>
                            <h3 style="text-align:center;">用户登录</h3>
                            <el-form label-position="left">
                                <el-form-item label="用户名">
                                    <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密&nbsp;&nbsp;&nbsp;码">
                                    <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-input placeholder="请输入验证码" v-model="user.captcha" style="width: 110px;margin-left:50px;margin-right: 20px;"></el-input>
                                    <div>
                                        <img :src="captchaUrl" @click="refreshCaptcha" alt="Captcha" style="width:125px;vertical-align: bottom; "/>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="width:100%;" @click="login()">登录</el-button>
                                </el-form-item>
                            </el-form>
                            <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
                                (体验账号:admin 密码:admin)
                            </div>
                        </el-card>
<!--                        <el-card>
                            <h3 style="text-align:center;">用户登录</h3>
                            <el-form label-position="left">
                                <el-form-item label="用户名">
                                    <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密&nbsp;&nbsp;&nbsp;码">
                                    <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <div>
                                        <img :src="captchaUrl" @click="refreshCaptcha" alt="Captcha" />
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="width:100%;" @click="login()">登录</el-button>
                                </el-form-item>
                            </el-form>
                            <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
                                (体验账号:admin 密码:admin)
                            </div>
                        </el-card>-->
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>



<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";
import qs from "qs";


const user = ref({username: '', password: '',captcha:''});
const instance = axios.create({
    withCredentials: true // 确保发送Cookies
});
const captchaUrl = ref(BASE_URL+'/v1/user/captcha/generate?' + Date.now());

const refreshCaptcha = () => {
    captchaUrl.value = BASE_URL+'/v1/user/captcha/generate?' + Date.now();
};

const login = () => {
    let data = qs.stringify(user.value);
    console.log(data);
    // Security默认代理接口为login
    instance.post(BASE_URL + '/v1/user/login', data).then(response => {
        if (response.data.code == 2000) {
            ElMessage.success('登录成功!');
            localStorage.user = JSON.stringify(response.data.data);
            router.push('/user');
        } else {
            ElMessage.error(response.data.msg);
            refreshCaptcha();
        }
    }).catch(error => {
        // 处理请求错误
        console.error('Login failed', error);
        ElMessage.error('登录失败，请稍后再试');
    });
};

/*
//登录方法
const login = () => {
    let data = qs.stringify(user.value);
    console.log(data);
    //Security默认代理接口为login
    axios.post(BASE_URL+'/v1/user/login', data).then(response => {
        if (response.data.code == 2000) {
            ElMessage.success('登录成功!');
            localStorage.user = JSON.stringify(response.data.data);
            router.push('/user');
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}
*/



</script>

<style scoped>
.el-card {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
}
</style>